<template>
    <Card>
      <Row>
        <Col span="3" style="font-size: 20px">用户查询</Col>
        <Col span="4">
          <Input type="text" placeholder="请输入用户名信息" v-model="fuzzyKey">
          <span slot="prepend">
            <Icon type="ios-contact" slot="prefix"/>
          </span>
          </Input>
        </Col>
        <Col span="4" offset="5">
          <Input type="text" placeholder="请输入电话号码" v-model="phone">
          <span slot="prepend">
            <Icon :size="16" type="ios-call-outline" slot="prefix"/>
          </span>
          </Input>
        </Col>
        <Col span="2" offset="5"><Button type="primary" @click="searchUser">查询</Button></Col>
        <Col span="1"><Button icon="ios-add-circle-outline" @click="value3 = true"></Button></Col>
        <Drawer title="新建用户" v-model="value3" width="260" :mask-closable="false" :styles="styles">
          <Form :model="formData" :rules="rules" @keydown.enter.native="submit">
            <FormItem prop="userName">
              <Input v-model="formData.userName" placeholder="请输入用户名" >
              <span slot="prepend">
                <Icon type="ios-contact" slot="prefix"/>
              </span>
              </Input>
            </FormItem>
            <FormItem prop="nickName">
              <Input v-model="formData.nickName" placeholder="请输入用户昵称">
              <span slot="prepend">
                <Icon :size="16" type="ios-contact-outline" />
              </span>
              </Input>
            </FormItem>
            <FormItem prop="name">
              <Input v-model="formData.name" placeholder="请输入用户真实姓名">
              <span slot="prepend">
                <Icon :size="16" type="md-contact" />
              </span>
              </Input>
            </FormItem>
            <FormItem prop="phone">
              <Input v-model="formData.phone" placeholder="请输入手机号">
              <span slot="prepend">
                <Icon type="md-call" slot="prefix"/>
              </span>
              </Input>
            </FormItem>
            <FormItem prop="email">
              <Input v-model="formData.email" placeholder="请输入电子邮件">
              <span slot="prepend">
                <Icon type="ios-mail-outline" />
              </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="formData.password" placeholder="请输入密码">
              <span slot="prepend">
                <Icon type="ios-lock" slot="prefix"/>
              </span>
              </Input>
            </FormItem>
          </Form>
          <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="value3 = false">取消</Button>
            <Button type="primary" @click="submit">提交</Button>
          </div>
        </Drawer>
      </Row>
    </Card>
</template>

<script>
  import {url} from '../../../config/url'
    export default {
        name: "user-search",
      props: {
        userNameRules: {
          type: Array,
          default: () => {
            return [
              { required: true, message: '账号不能为空', trigger: 'blur' }
            ]
          }
        },
        nameRules: {
          type: Array,
          default: () => {
            return [
              { required: true, message: '用户真实姓名不能为空', trigger: 'blur' }
            ]
          }
        },
        phoneRules:{
          type: Array,
          default: () => {
            return [
              { required: true, message: '手机号不能为空', trigger: 'blur' }
            ]
          }
        },
        passwordRules: {
          type: Array,
          default: () => {
            return [
              { required: true, message: '密码不能为空', trigger: 'blur' }
            ]
          }
        }
      },
      data(){
          return{
            fuzzyKey:'',
            phone:'',
            value3: false,
            data:[],
            styles: {
              height: 'calc(100% - 55px)',
              overflow: 'auto',
              paddingBottom: '53px',
              position: 'static'
            },
            formData: {
              userName:'',
              nickName:'',
              name: '',
              phone:'',
              email:'',
              password:''
            },
          }
      },
      computed:{
        rules(){
          return{
            userName:this.userNameRules,
            phone:this.phoneRules,
            password:this.passwordRules,
            name:this.nameRules
          }
        }
      },
      methods:{
        submit(){
          if(this.formData.userName.length>0&&this.formData.phone.length>0&&this.formData.password.length>0&&this.formData.name.length>0){
            this.$axios.post(url+'/user',{
              'username':this.formData.userName,
              'password':this.formData.password,
              'nickname':this.formData.nickName,
              'name':this.formData.name,
              'phone':this.formData.phone,
              'email':this.formData.email,
            },{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(res=>{
              if(res.data.error_code==0){
                alert("新建用户成功");
                this.value3=false
              }else{
                alert("新建用户失败："+res.data.error_code)
              }
            });
          }
          else {
            alert("用户信息不全，新增失败");
          }
        },
        //发送查询用户的条件
        searchUser(){
          this.data=[];
          let query=JSON.stringify({
            'username':this.fuzzyKey,
            'nickname':this.fuzzyKey,
            'name':this.fuzzyKey,
            'phone':this.phone,
            'page_size':10,
            'fuzzy_key':['username','nickname','name'],
            'or_key':['username','nickname','name'],
          });
          this.$axios.get(url+'/user',{
            params:{
              'data':query
            }
          }).then(res=>{
            if(res.data.error_code==0){
              let size=res.data.data.total_records;
              let records=res.data.data.records;
              for(let i=0;i<size;i++){
                let record={
                  id:records[i].id,
                  username:records[i].username,
                  name:records[i].name,
                  phone:records[i].phone,
                  email:records[i].email,
                };
                this.data.push(record)
              }
              this.$emit('data',this.data);
            }else{
              alert("查询失败")
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
